<template>
    <div class="lastAll">
        <div class="startOne">
            <h2 class="titleOne">知名客户</h2>
            <p class="textOne">虽然都不是500强，但我可以给您讲我们与任何一个伙伴的故事</p>
            <div class="imgOne">
                <img src="../../assets/partner/pars1.png" alt="">
                <img src="../../assets/partner/pars2.png" alt="">
            </div>
        </div>
        <div class="startTwo">
            <div class="mainTwo">
                <div class="content">
                    <h4>现在，非常期待与您的又一次邂逅</h4>
                    <br>
                    <p>我们会努力让每一次邂逅都打爆您的头</p>
                </div>
                <span>立即邂逅</span>
            </div>
        </div>
        <div class="startThree">
            <div class="mainThree">
                <div class="contentThree">
                    <h4>我们的网络服务流程</h4>
<!--                    <br>-->
                    <p>丰富互联网信息化项目服务经验，让我们对项目实施的规范化、标准化有更多的理解</p>
                </div>
                <div class="ulThree">
                    <ul>
                        <li v-for="(item,index) in contenThree" :key="index" >
                            <img :src="item.imgUrl" alt="">
                            <span>{{item.text}}</span>
                        </li>
                    </ul>
                </div>
                <p class="zhu">注：以上只是简洁的流程，实际项目中流程会有更多细节，请悉知</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "last_all",
        data(){
            return{
                contenThree:[
                    {
                        imgUrl:require('../../assets/flow/p1.png'),
                        text:'沟通需求',
                    },
                    {
                        imgUrl:require('../../assets/flow/p2.png'),
                        text:'签订合同',
                    },
                    {
                        imgUrl:require('../../assets/flow/p3.png'),
                        text:'UE原型设计',
                    },
                    {
                        imgUrl:require('../../assets/flow/p4.png'),
                        text:'需求确认',
                    },
                    {
                        imgUrl:require('../../assets/flow/p5.png'),
                        text:'UI设计',
                    },
                    {
                        imgUrl:require('../../assets/flow/p6.png'),
                        text:'开发编码',
                    },
                    {
                        imgUrl:require('../../assets/flow/p7.png'),
                        text:'测试验收',
                    },
                    {
                        imgUrl:require('../../assets/flow/p8.png'),
                        text:'交付培训售后',
                    },
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
.lastAll{
    width: 100%;
    height: 100%;
    min-width: 1300px;
    .startOne{
        height: 500px;
        width: 100%;
        box-sizing: border-box;
        background: #F8F8F8;
        padding: 100px 400px;
        .titleOne{
            font-size: 30px;
            font-weight: 400;
            text-align: center;
            margin-bottom: 15px;

        }
        .textOne{
            font-size: 15px;
            font-weight: 400;
            text-align: center;
            color: #aaaaaa;
        }
        .imgOne{
            width: 80%;
            overflow: auto;
            margin: 0 auto;
            margin-top: 70px;
            img{
                display: block;
                width: 210px;
                height: 70px;
                -webkit-filter: grayscale(100%);
                transition: .3s ease-in-out;
                &:first-child{
                    float: left;
                    margin-left: 20px;
                }
                &:last-child{
                    float: right;
                }
                &:hover{
                    -webkit-filter: grayscale(0%);
                }
            }
        }
    }
    .startTwo{
        background: transparent;
        /*opacity: 0;*/
        position: relative;
        /*z-index: 2;*/
        height: 340px;
        width: 100%;
        box-sizing: border-box;
        padding: 120px 0;
        padding-top: 150px;
        background: url("../../assets/bg.gif") center;
        background-size: 100% 100%;
        background-attachment: fixed;
        .mainTwo{
            width: 70%;
            margin: 0 auto;
            span{
                display: block;
                float: right;
                color: white;
                width: 150px;
                height: 45px;
                line-height: 45px;
                text-align: center;
                border: 1px solid white;
                border-radius: 5px;
                margin-top: 20px;
                background: transparent;
                position: relative;
                z-index: 20;
                cursor: pointer;
                &:before,&:after{
                    content: '';
                    width: 0;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    border-radius: 5px;
                    background: white;
                    transition: .5s ease-in-out;
                    z-index: -2;
                }
                &:hover{
                    z-index: 1;
                    background: transparent;
                    color: #666666;
                }
                &:hover:before,&:hover:after{
                    width: 100%;
                    /*z-index: 2;*/
                }

            }
            .content{
                float: left;
                h4{
                    float: left;
                    margin: 0;
                    color: white;
                    font-size: 30px;
                    font-weight: 500;
                    margin-bottom: 15px;
                }
                p{
                    float: left;
                    margin: 0;
                    font-size: 20px;
                    font-weight: 400;
                    color: white;
                }
            }

        }
    }
    .startThree{
        height: 550px;
        width: 100%;
        box-sizing: border-box;
        padding: 70px 150px;
        .mainThree{
            width: 100%;
            height: 100%;
            .contentThree{
                h4{
                    text-align: center;
                    font-size: 30px;
                    font-weight: 400;
                    margin-bottom: 15px;
                }
                p{
                    text-align: center;
                    font-weight: 400;
                    font-size: 17px;
                    color: #aaaaaa;
                }
            }
            .ulThree{
                ul{
                    overflow: auto;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 80px;
                    min-width: 1250px;
                    margin-left: -50px;
                    li{
                        float: left;
                        display: flex;
                        flex-direction: column;
                        width: 200px;
                        border-right: 1px ridge  #cccccc;
                        box-sizing: border-box;
                        padding: 0 5px;
                        cursor: pointer ;
                        img{
                            height: 50px;
                            width: 50px;
                            /*text-align: center;*/
                            margin: 0 auto;

                        }
                        &:first-child{
                            border-left: 1px solid #cccccc;
                        }
                        span{
                            font-size: 12px;
                            font-weight: 400;
                            color: #aaaaaa;
                            text-align: center;
                            margin-top: 15px;
                        }

                    }
                }
            }
            .zhu{
                padding-left: 100px;
                font-size: 14px;
                color: #aaaaaa;
                margin-top: 25px;
            }

        }
    }
}
</style>
